<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="com.cpfmat.common.Contains,com.cpfmat.entity.ContentUser,java.util.Set,java.util.Iterator,java.util.Map.Entry"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<script type="text/javascript" charset="utf-8">
window.UEDITOR_HOME_URL = "${basePath}/ueditor/"; 
</script>

<script type="text/javascript" src="${basePath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${basePath}/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.fileupload.js"></script>
<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.fileupload-process.js"></script>

<script type="text/javascript">
	var $modal = $('#detail-loading');
	$(function(){
		var $textArea = $('#content');
		var editor = UE.getEditor('content',{

		     initialFrameHeight:871,//设置编辑器高度

		     scaleEnabled:true,
		     
		     autoFloatEnabled:false

		  });
		var $form = $('#detailForm');
		
		$form.validator({
			onValid : function(validity) {
				$(validity.field).closest('.am-form-group').find('.am-alert').hide();
			},
			onInValid : function(validity) {
				var $field = $(validity.field);
				var $group = $field.closest('.am-form-group');
				var $alert = $group.find('.am-alert');
				// 使用自定义的提示信息 或 插件内置的提示信息
				var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
				
				if (!$alert.length) {
					$alert = $('<div class="am-alert am-alert-danger"></div>').hide().appendTo($group);
				}
				
				$alert.html(msg).show();
			},
			submit : function() {
				// 同步编辑器数据
				editor.sync();
				
				var formValidity = this.isFormValid();
				
				// 表单验证未成功
				if (!formValidity) {
					// 如果未通过验证的第一个元素是Ueditor 聚焦富文本编辑器
					if($form.find('.' + this.options.inValidClass).eq(0).is($textArea)){
						editor.focus();
					}
					console.warn('验证状态：', '未通过');
				} else{
					usercont.save("${contentUser.sqlId }");
			   	}
				return false;
			}
		});
		
		// 编辑器内容变化时同步到 textarea
		editor.addListener('contentChange', function() {
			editor.sync();
			
			// 触发验证
			$textArea.trigger('change');
		});
		
		$('#fileupload').fileupload({
			url:"${basePath}/uploadAttachment",
			autoUpload: true,
			iframe : true,
			maxNumberOfFiles : 3,
			add : function(e, data) {
				if (data.files[0].size > 1024*1024*10) {
					 window.parent.layer.alert('上传文件大于10M！', {
						icon : 5
					});
					return;
				}
				data.process().done(function() {
					$('#pBar').fadeIn();
					data.submit();
				});
			},
			progressall : function(e, data) {
				var progress = parseInt(data.loaded / data.total* 100, 10);
				$('#processBar').css('width', progress + '%');
				$('#processBar').text(progress + '%');
			},
			done:function(e,data){
				$('#pBar').html("<div class='am-progress-bar am-progress-bar-success' id='processBar'></div>");
				
				if(data && data.result) {
					var tempFileName = data.result.fileName;
					if(data.result.fileName.length>10){
						tempFileName = data.result.fileName.substring(0,10) + "...";
					}
					
					var html = "";
					html += "<div class='am-form-group'>";
					html += "<div class='am-u-sm-9 am-fr'>";
					html += "<button id='dowloadBtn' type='button' ";
					html += "onclick='downloadAttachment(&apos;"+data.result.url+"&apos;,&apos;"+data.result.fileName+"&apos;)' ";
					html += "title='"+data.result.fileName+"')' ";
					html += "class='am-btn am-btn-default am-btn-sm'>";
					html += "<i class='am-icon-download' style='max-width: 200px;'>" + tempFileName + "</i>";
					html += "</button>";
			    	html += "<button id='deleteFileBut'  type='button' onclick='delAttachment(this,&apos;"+data.result.id+"&apos;)' class='am-btn am-btn-danger am-btn-sm'>";
					html += "<i class='am-icon-remove'>删除附件 </i>";
					html += "</button>";
					html += "<input type='hidden' name='attachmentId' value='" + data.result.id + "' />";
					html += "</div>";
					html += "</div>";
					$("#downLoadDiv").append(html);
					parent.layer.msg("上传成功", {
					    icon: 1,
					    skin: 'layer-ext-moon'
					});
				} else {
					parent.layer.msg("上传失败", {
					    icon: 2,
					    skin: 'layer-ext-moon'
					});
				}
			}
		});
	});

	function delAttachment(obj,attachmentId){
		layer.confirm('确定删除该文件吗？', {btn: ['确定','取消'] , icon:3 }, 
		function(){
			$modal.modal();
			$.ajax({
				url : "${basePath}/manage/article/delAttachment",
				method: 'POST',
				data : {
					"attachmentId":attachmentId
				},
				dataType : 'html',
				success : function(data) {
					$modal.modal("close");
					if(data == "true" || data == true){
						parent.layer.msg("删除成功", {icon: 1});
						$("#upLoadDiv").show();
						$('#pBar').show();
						$('#pBar').html("<div class='am-progress-bar am-progress-bar-success' id='processBar'></div>");
						$(obj).parent().parent().remove();
					}
					else{
						parent.layer.msg("删除失败", {icon: 2});
					}
				},
				error : function(){
					$mainModal.modal("close");
					layer.msg("连接服务器时遇到错误！", {icon: 2});
				}
			});
		});
	}

	function downloadAttachment(fileUrl,fileName){
		var form = document.createElement("form");
		form.action = "${basePath}/downloadAttachments";
		form.method = "post";
		form.target = "_blank";
		form.style.display = "none";
		var input = document.createElement("input");
		var input1 = document.createElement("input");
		input.name = "url";
		input.type = "hidden";
		input.value = fileUrl;
		input1.name = "fileName";
		input1.type = "hidden";
		input1.value = fileName;
		
		form.appendChild(input);
		form.appendChild(input1);
		
		document.body.appendChild(form);
		
		form.submit();
		document.body.removeChild(form);
	}
</script>

<form id="detailForm" class="am-form am-form-horizontal" data-am-validator>
<div class="am-form-group">
	<label for="submission" class="am-u-sm-3 am-form-label am-text-right">报送事项</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="submission" id="submission" class="am-input-sm" value="${contentUser.submission}" maxlength="200" required data-validation-message="报送事项不能为空"/>
	</div>
</div>
<div class="am-form-group">
	<label for="unit" class="am-u-sm-3 am-form-label am-text-right">报送单位</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<c:choose>
			<c:when test="${!empty contentUser.unit }">
				<c:set var="unit" value="${contentUser.unit }"/>
			</c:when>
			<c:otherwise>
				<c:set var="unit" value="${company.companyName }"/>
			</c:otherwise>
		</c:choose>
		<input type="text" name="unit" id="unit" class="am-input-sm" value="${unit}" maxlength="200" required data-validation-message="报送单位不能为空"/>
	</div>
</div>
<div class="am-form-group">
	<label for="contactPerson" class="am-u-sm-3 am-form-label am-text-right">联系人</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<c:choose>
			<c:when test="${!empty contentUser.contactPerson }">
				<c:set var="contactPerson" value="${contentUser.contactPerson }"/>
			</c:when>
			<c:otherwise>
				<c:set var="contactPerson" value="${userinfo.userName }"/>
			</c:otherwise>
		</c:choose>
		<input type="text" name="contactPerson" id="contactPerson" class="am-input-sm" maxlength="50" value="${contactPerson}" required data-validation-message="联系人不能为空"/>
	</div>
</div>
<div class="am-form-group">
	<label for="contactPhone" class="am-u-sm-3 am-form-label am-text-right">联系电话</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<c:choose>
			<c:when test="${!empty contentUser.contactPhone }">
				<c:set var="contactPhone" value="${contentUser.contactPhone }"/>
			</c:when>
			<c:otherwise>
				<c:set var="contactPhone" value="${company.companyPhoneNumber }"/>
			</c:otherwise>
		</c:choose>
		<input type="text" name="contactPhone" id="contactPhone" class="am-input-sm" maxlength="18" value="${contactPhone}" required data-validation-message="联系电话不能为空"/>
	</div>
</div>
<div class="am-form-group">
	<label for="title" class="am-u-sm-3 am-form-label am-text-right">技术成果名称</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="title" id="title" class="am-input-sm" maxlength="200" value="${contentUser.title}" required data-validation-message="技术成果名称不能为空"/>
	</div>
</div>
<%-- <div class="am-form-group">
	<label for="subTitle" class="am-u-sm-3 am-form-label am-text-right">技术成果简介</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="subTitle" id="subTitle" class="am-input-sm" maxlength="200" value="${contentUser.subTitle}" required data-validation-message="技术成果简介不能为空"/>
	</div>
</div> --%>

<div class="am-form-group">
	<label for="tecExp" class="am-u-sm-3 am-form-label am-text-right">技术成熟度</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="tecExp" id="tecExp"
			maxlength="200" class="am-input-sm" value="${contentUser.tecExp}" maxlength="200" required data-validation-message="技术成熟度不能为空"/>
	</div>
</div>

<div class="am-form-group">
	<label for="specialField" class="am-u-sm-3 am-form-label am-text-right">专项领域</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<select name="specialField" id="specialField" readonly="${readonly }" data-am-selected required data-validation-message="专项领域不能为空">
			<%
			Set<Entry<String,String>> entrySet = Contains.specialFieldMap.entrySet();
			Iterator<Entry<String, String>> iterator = entrySet.iterator();
			StringBuilder strbd = new StringBuilder();
			while(iterator.hasNext()) {
				Entry<String, String> next = iterator.next();
				strbd.append("<option value='");
				strbd.append(next.getKey());
				strbd.append("'");
				ContentUser content = (ContentUser) request.getAttribute("contentUser");
				if(content != null && next.getKey().equals(content.getSpecialField())){
					strbd.append(" selected='selected'");
				}
				strbd.append(">");
				strbd.append(next.getValue());
				strbd.append("</option>");
			}
			out.print(strbd.toString());
			%>
		</select>
	</div>
</div>

<div class="am-form-group">
	<div>
		<label class="am-u-sm-3 am-form-label am-text-right">附件</label>
	</div>
	<div>
		<div class="am-u-sm-9">
			<div class="am-form-group am-form-file">
				<button id="uploadFileBut" type="button" class="am-btn am-btn-default am-btn-sm">
					<i class="am-icon-upload">上传附件 </i>
				</button>
				<input id="fileupload" type="file" name="file" multiple="false" />
			</div>
			<div class="am-progress am-progress-striped am-active" id="pBar" style="margin: 5px; width: 300px;">
				<div class="am-progress-bar am-progress-bar-success" id="processBar"></div>
			</div>
			<span style="text-align: center; font-size: 14px; color: gray;">请上传附件大小10M以内。</span>
		</div>
	</div>
	<div id="downLoadDiv">
		<c:if test="${!empty attachments}">
			<c:forEach items="${attachments }" var="a" varStatus="status">
				<div class="am-form-group">
					<div class="am-u-sm-9 am-fr">
						<button type="button"
							onclick="downloadAttachment('${a.filePath }','${a.fileName }')"
							title="${a.fileName }"
							class="am-btn am-btn-default am-btn-sm">
							<c:choose>
								<c:when test="${fn:length(a.fileName) > 10}">
									<c:set var="fileName" value="${fn:substring(a.fileName, 0, 10)}..." />
								</c:when>
								<c:otherwise>
									<c:set var="fileName" value="${a.fileName}" />
								</c:otherwise>
							</c:choose>
							<i class="am-icon-download" style="max-width: 200px;">${fileName}</i>
						</button>
						<button type="button"
							onclick="delAttachment(this,'${a.seqId }')"
							class="am-btn am-btn-danger am-btn-sm">
							<i class="am-icon-remove">删除附件 </i>
						</button>
						<input type="hidden" name="attachmentId" value="${a.seqId }" />
					</div>
				</div>
			</c:forEach>
		</c:if>
	</div>
</div>
	
<div class="am-form-group">
	<label for="specialField" class="am-u-sm-3 am-form-label am-text-right">技术成果简介</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0" style="margin: 0px auto; height: 1036px">
		<textarea class="am-validate" name="content" id="content" style="height : 871px;" required  data-validation-message="文章不能为空">${contentUser.content}</textarea>
	</div>
</div>

<!-- 表单隐藏域参数 -->
<input type="hidden" name="seqId" value="${contentUser.sqlId }" />
<input type="hidden" name="attachementIds" value="${contentUser.columnId }" />

<div class="am-form-group">
	<div class="am-u-sm-3 am-u-sm-centered">
		<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
		<button type="button" class="am-btn am-btn-primary am-btn-xs"
			onclick="usercont.close();">放弃保存</button>
	</div>
</div>
</form>

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="detail-loading">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">正在载入...</div>
    <div class="am-modal-bd">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div>
</html>